<template>
  <div class="passage-container">
    <div class="title-item" v-if="message.title">
      <div class="title-time">{{ message.serverTime | titleTimeFormat }}</div>
      <div class="title-name">{{ message.talker }}</div>
    </div>
    <div class="chat-item" v-else>
      <div class="info" :class="{ member: message.talkerType != '3' }">
        <span class="name" v-if="message.talkerType != '4'">{{ message.talker }}</span>
        <span class="name" v-else>游客</span>
        <span class="time">{{ message.serverTime | formatDate }}</span>
      </div>
      <div class="content">
        <p class="word" v-if="message.contentType == '0x41'" v-html="message.content">
          {{ message.content }}
        </p>
        <p class="word" v-if="message.contentType == '0x62'">
          {{ message.content | linkShow }}
        </p>
        <el-image
          v-if="message.contentType == '0x45'"
          style="width: 50px; height: 50px; border-radius: 8px"
          :src="message.content"
          fit="fill"
          :preview-src-list="[message.content]"
        ></el-image>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "history-passage",
  data() {
    return {};
  },
  props: {
    message: {
      type: Object,
    },
  },
  filters: {
    linkShow(Object) {
      const msg = JSON.parse(Object);
      return msg.toolName + "(连接消息)";
    },
  },
  mounted() {
    console.log("message", this.message);
  },
  methods: {},
};
</script>

<style lang="scss" scoped>
.title-item {
  display: flex;
  height: 30px;
  line-height: 30px;
  padding: 0 15px;
  border-top: 1px solid #e6e6e6;
  border-bottom: 1px solid #e6e6e6;
  .title-name{
    margin-left: 18px;
  }
}
.chat-item {
  margin-top:12px;
  padding: 0 15px;
}
.info {
  color: $custom-tabs;
  &.member {
    color: #333;
  }
  .name{
    font-weight: 700;
  }
  .time {
    margin-left: 8px;
  }
}
.content {
  margin-top:6px;
  .word {
    word-break: break-word;
  }
}
</style>